<template>
    <div class="percentage-range">

        <el-input v-model="value[0]" type="text" @input="handleMinInput">
            <template slot="append">%</template>
        </el-input>
        <span class="range-word"> - </span>
        <el-input v-model="value[1]" type="text" @input="handleMaxInput">
            <template slot="append">%</template>
        </el-input>

    </div>
</template>

<script>

export default {
    name: 'PercentageRange',
    props: {
        value: {
            // type: Array,
            required: true,
        },

        // size: {
        //     type: String, default: 'mini'
        // },
        // valueFormat: {
        //     type: String, default: 'yyyy'
        // },
    },
    data() {
        return {
            minValue: null, // 最小值
            maxValue: null, // 最大值
        };
    },
    methods: {
        // 处理最小值输入
        handleMinInput(value) {
            if (isNaN(Number(value))) {
                this.value[0] = 0;
            } else if (value < 0) {
                this.value[0] = 0;
            } else if (value > this.value[1]) {
                this.value[0] = this.value[1]
            } else if(value >100 ){
                this.value[0] = 100;
            }else {
                this.value[0] = value;
            }
        },
        // 处理最大值输入
        handleMaxInput(value) {
            if (value > 100) {
                this.value[1] = 100;
            } else if (value < this.value[0]) {
                this.value[1] = this.value[0]
            } else {
                this.value[1] = value;
            }
        },
    },
};
</script>

<style scoped lang="scss">
.percentage-range {
    max-width: 600px;
    margin: 0 auto;
    ::v-deep {
        .el-input-group__append,
        .el-input-group__prepend {
            background-color: transparent;
            color: #909399;
            vertical-align: middle;
            display: table-cell;
            position: relative;
            border: none;
            border-radius: 4px;
            padding: 0 3px;
            width: 1px;
            white-space: nowrap;
        }
        .el-input-group--append .el-input__inner,
        .el-input-group__prepend {
            border-radius: 4px;
        }
        .el-input {
            max-width: 82px;
            margin: 0;
        }
    }
}

.range-display {
    margin-top: 20px;
    font-size: 16px;
    color: #606266;
}
.range-word {
    margin-left: 5px;
    margin-right: 5px;
    font-size: 12px;
}
</style>